<template>
<view class="page"> 
	<template v-if="isLogin">
		<view class="h90">
			<view class="fix-wrap">
				<view class="h45 search-bar">
					<view class="search-form">
						<view class="icon sc-icon iconfont icon-sousuo">&#xe61e;</view>
						<input type="text" v-model="params.keyword" class="sc-inp"  placeholder="输入关键词搜索" @input="search">
						<view v-if="params.keyword" class="icon clear-btn iconfont icon-shanchu" @click="clearKeyword"></view>
					</view>
				</view>
				<view class="h45">
					<view class="filter-bar"> 
						<view :class="['item',{'active':filter_data.isShowProjectType}]" @click.stop="showFilter(1)">
							<view class="name">{{filter_data.select_envtypes||'生境类型'}}</view>
							<view class="iconfont icon-jiantou_liebiaozhankai_o f-s60">&#xeb8b;</view>
						</view>
						<view :class="['item',{'active':filter_data.isShowProjectStatus}]" @click.stop="showFilter(2)">
							<view class="name">{{filter_data.select_level_name||'总评等级'}}</view>
							<view class="iconfont icon-jiantou_liebiaozhankai_o f-s60">&#xeb8b;</view>
						</view>
					</view>
					
					<!-- 筛选区域 -->
					<view v-if="filter_data.isShowFilter" class="filter-select-page" @click="hideFilter">
						<!-- 生境类型 -->
						<template v-if="filter_data.isShowProjectType">
							<view class="filter-select-list">
								<view class="item" v-for="(item,index) in filter_data.envtypes" :key="index" @click="filterDataByType(item.value)">
									<view class="val">{{item.value}}</view>
									<view class="icon"> 
										<view v-if="item.check" class="iconfont f-s36 active">&#xe604;</view>
									</view>
								</view>
							</view>
						</template>
						
						<!-- 总评等级 -->
						<template v-if="filter_data.isShowProjectStatus">
							<view class="filter-select-list">
								<view class="item" v-for="(item,index) in filter_data.level" :key="index" @click="filterDataByLevel(item.value,item.name)">
									<view class="val">{{item.name}}</view>
									<view class="icon"> 
										<view v-if="item.check" class="iconfont f-s36 active">&#xe604;</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view> 
			</view>
		</view>
		<view class="body">
			<view class="list-wrap">			
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				
				<template v-else>
					<template v-if="list.length>0"> 		 
						<navigator open-type="navigate" hover-class="none" :url="'/package_project/jc_pro/dataDetail/dataDetail?data_type='+params.data_type+'&id='+item.id+'&pid='+item.p_id+'&fid='+item.fid+'&pro_type='+params.pro_type" class="item" v-for="(item,index) in list" :key="index">
							<view class="pic"><image :src="img_path+item.file_path" mode="widthFix"></image></view>
							<view class="info">
								<view class="name">{{item.env_type}}</view>
								<view class="params">
									<view class="text">{{item.address}}</view> 
									<view class="text">更新时间：{{item.last_update_time}}</view> 
								</view>
							</view>
						</navigator> 
						<loading :loadingState="loadingState"></loading>
					</template>
					<template v-else>
						<empty msg="暂无信息"></empty>
					</template>
					
				</template> 
			</view>
		</view>  
		
	</template>
	 
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue'
import {img_path} from '@/config.js'

export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				completed:false
			}, 
			userInfo:uni.getStorageSync('userInfo'),
			list:[],
			total:0,
			filter_data:{
				all_active:0,
				pro_active:2,
				sta_active:0,
				isShowFilter:false,
				isShowProjectType:false,
				isShowProjectStatus:false,
				select_envtypes:'',
				select_level:'',
				select_level_name:'',
				envtypes:[{
					check:true,
					value:'全部'
				}],
				level:[
					{
						value:'0',
						name:'不限',
						check:false 
					},
					{
						value:'1',
						name:'1级',
						check:false 
					},
					{
						value:'2',
						name:'2级',
						check:false 
					},
					{
						value:'3',
						name:'3级',
						check:false 
					},
					{
						value:'4',
						name:'4级',
						check:false 
					},
					{
						value:'5',
						name:'5级',
						check:false 
					},
				] 
			},
			params:{
				pid:'0',
				uid:'',
				page:1,
				pao_type:'',   
				memberInfo:0,
				type:'',   // all 全部数据  user 用户数据
				data_type:'',// fk 防控  fx 防效
				keyword:''
				
			},
			img_path:img_path
		}
	},
	onShow() { 
	},
	async onLoad(params) {   
		this.params.pid=params.pid;
		this.params.pro_type=params.pro_type;
		this.params.uid=params.uid;
		this.params.type=params.type;    
		this.params.data_type=params.data_type;
		this.params.memberInfo=params.memberInfo;
		
		this.isLogin = await this.$loginState('check');
		if(this.isLogin){
			if(this.params.pro_type==2){
				// 监测数据
				this.getPcDataList(); 
			}else if(this.params.pro_type==4){
				// 个人作业数据
				this.groupPcDatalist();
			}
			this.getEnvtype();
		}
	},
	onReachBottom(){
		if(this.loadingState.completed){ 
			this.params.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.params.page++;
				
				if(this.params.pro_type==2){
					// 监测数据
					this.getPcDataList(); 
				}else if(this.params.pro_type==4){
					// 个人作业数据
					this.groupPcDatalist();
				}
			} 
			
		}	 
	},
	methods:{
		
		dataInit:function(){
			this.loadingState={
				default:true,
				loading:false,
				completed:false
			};  
			this.list=[];
			this.total=0;
			this.params.page=1;
		},
		
		// 获取监测普查数据列表 
		getPcDataList:async function(){ 
			let res=await this.$api.pro_api.pcDataList({
				uid: this.params.uid||this.userInfo.id,
				pid: this.params.pid,
				page: this.params.page,
				dataRange: this.params.type,
				type_code: 'pc_data',
				memberInfo: this.params.memberInfo,
				pro_type: this.params.pro_type, 
				is_app:1,
				address:this.params.keyword,
				env_type:this.filter_data.select_envtypes=='全部'?'':this.filter_data.select_envtypes,
				re_level:this.filter_data.select_level
			})    
			console.log(res)
			if(res.data.ret==0){
				this.loadingState.default=false;
				this.loadingState.loading=true;
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length==res.data.data.count){					
					this.loadingState.loading=false;
					this.loadingState.completed=true;
					console.log('没数据了',this.loadingState.loading,this.loadingState.completed)
				}                     
			}else{
				this.loadingState.default=false; 				
			}
		},		 
		
		// 获取个人监测数据列表
		groupPcDatalist:async function(){
			let res=await this.$api.pro_api.groupPcDatalist({
				uid: this.userInfo.id,
				pid: this.userInfo.pid,
				page: this.params.page,  
				memberInfo:1,
				type:1,
				is_app:1
			})     
			if(res.data.ret==0){
				this.loadingState.default=false;
				this.loadingState.loading=true;
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length==res.data.data.count){
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				} 
			}else{
				this.loadingState.default=false;
			} 
		},
		
		// 获取生境类型
		getEnvtype: async function() {
			let res = await this.$api.yfk_api.getEnvtype();
			
			if (res.data.ret == 0) { 								
				res.data.data.envtypes.forEach(item=>{
					let data={};
					data.check=false;
					data.value=item;
					this.filter_data.envtypes.push(data);
				}) 	 
			}
		},
		
		// 打开过滤
		showFilter:function(type){
			// type 筛选条件  1 类型  2 状态		 		
			
			if(type==1){
				this.filter_data.isShowFilter=true;
				this.filter_data.isShowProjectType=true;
				this.filter_data.isShowProjectStatus=false;
				this.filter_data.pro_active=type;
				this.filter_data.all_active=null;
				this.params.datatype='pc';
			}else if(type==2){
				this.filter_data.isShowFilter=true;
				this.filter_data.isShowProjectType=false;
				this.filter_data.isShowProjectStatus=true;
				this.filter_data.sta_active=type;
				this.filter_data.all_active=null;
				this.params.datatype='pc';
			} 
		},
		
		// 关闭过滤
		hideFilter:function(){
			this.filter_data.isShowFilter=false;
			this.filter_data.isShowProjectStatus=false;
			this.filter_data.isShowProjectType=false;
		},
		
		// 生境类型过滤
		filterDataByType:function(protype){ 
			this.filter_data.envtypes.forEach(item=>{
				item.check=false;
				if(item.value==protype){					
					item.check=true;
					if(item.value=='不限'){
						this.filter_data.select_envtypes='';
					}else{
						this.filter_data.select_envtypes=item.value; 
					}
					this.dataInit();
					
					if(this.params.pro_type==2){
						// 监测数据
						this.getPcDataList(); 
					}else if(this.params.pro_type==4){
						// 个人作业数据
						this.groupPcDatalist();
					}
				}
			})
		},
		
		// 等级过滤
		filterDataByLevel:function(value,name){ 
			this.filter_data.level.forEach(item=>{
				item.check=false;
				if(item.value==value){
					this.filter_data.select_level=item.value; 
					this.filter_data.select_level_name=item.name; 
					item.check=true;
					if(item.value=='0'){
						this.filter_data.select_level='';
						this.filter_data.select_level_name=''; 
					}else{
						this.filter_data.select_level=item.value;
						this.filter_data.select_level_name=item.name;  
					}
					
					this.dataInit();
					if(this.params.pro_type==2){
						// 监测数据
						this.getPcDataList(); 
					}else if(this.params.pro_type==4){
						// 个人作业数据
						this.groupPcDatalist();
					}
					 
				}
			})
		},
		
		// 清空搜索词
		clearKeyword:function(){
			this.params.keyword='';
			this.dataInit(); 
			if(this.params.pro_type==2){
				// 监测数据
				this.getPcDataList(); 
			}else if(this.params.pro_type==4){
				// 个人作业数据
				this.groupPcDatalist();
			}
		},
		
		 
		// 搜索
		search:function(){
			this.dataInit();
			if(this.params.pro_type==2){
				// 监测数据
				this.getPcDataList(); 
			}else if(this.params.pro_type==4){
				// 个人作业数据
				this.groupPcDatalist();
			} 
		},
		
		
		
		
	},
	computed:{
		list_update(){   
			return this.$store.state.pro_jc_list_state
		}
	},
	watch:{
		list_update(newer,older){  
			if(newer!=older){
				this.list=[];
				this.params.page=1;
				this.total=0;
				this.loadingState.default=true;
				this.loadingState.loading=false;
				this.loadingState.completed=false;
				if(this.params.pro_type==2){
					// 监测数据
					this.getPcDataList(); 
				}else if(this.params.pro_type==4){
					// 个人作业数据
					this.groupPcDatalist();
				}
				// this.loadingState={
				// 	default:true,
				// 	loading:false,
				// 	compelted:false
				// };
				// this.list=[];
				// this.getPcDataList();
			}
		}
	},
	components:{
		loading,
		empty
	}
}
</script>

<style scoped lang="less">
	.filter-select-page {
		top: 90px
	}
	.list-wrap{
		padding-top:20rpx;
		.item{ 
			display: flex;
			padding:20rpx;
			margin-bottom: 20rpx;
			background:#fff;
			.pic{
				width:30%;
				display: flex;
				align-items: center;
				height: 200rpx;
				margin-right: 20rpx;
				overflow: hidden;
				flex-shrink: 0;
				border:1rpx solid #eee;
				image{
					width: 100%;
				}
			}
			.info{
				flex-grow: 2;
				.name{
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}
				.params{
					font-size:30rpx;
					color:#999;
					.text{
						margin-bottom:8rpx;
					}
				}
			}
		}
	}
	
	.add-yj-btn{ 
		width: 96%;
		height:80rpx;
		margin:10rpx auto;
		background: #f00;
		border-radius: 10rpx;
		text-align: center;
		line-height:80rpx;
		color:#fff;
		font-size:32rpx;
	}
</style>
